<template>
    <div class="movie-detal-wrap">
            <div class="wrap-heard">
                <div class="heard-avatar">
                    <div><img :src="datasList.haibao" alt=""></div>
                    <div class="heard-details">
                        <span>{{datasList.title1}}</span>
                        <span>{{datasList.weizhi}}</span>
                        <span class="el-icon-alarm-clock"> {{datasList.timer}}</span>
                        <span>{{datasList.price}}</span>
                    </div>
                    <div class="saoma-buy">
                        <img src="../../../assets/qr.png" alt="">
                        <span>App扫码购票</span>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    props:['datasList'],
    name: 'Moviemain',
    data() {
        return {
            
        };
    },
    mounted() {
        
    },
    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
.movie-detal-wrap{
        margin: 60px 0;
        width: 100%;
        min-height: 300px;
        .wrap-heard{
            width: 100%;
            height: 376px;
            background: linear-gradient(to left top , #5f47af 10% ,#8f5465 100%);
            padding-top:80px ;
            box-sizing: border-box;
            .heard-avatar{
                width: 1100px;
                height: 100%;
                /* background: #30582e; */
                margin: 0 auto;
                display: flex;
                .heard-details{
                    margin: 0 0 20px 30px;
                    display: flex;
                    flex-direction: column;
                    span{
                        margin-top: 15px;
                    }
                    >:nth-child(1){
                        font-size: 26px;
                        font-weight: bold;
                        color: #fff;
                    }
                    >:nth-child(2){
                        font-size: 15px;
                        color: #fff;
                        margin-bottom: 13px;
                    }
                    >:nth-child(3){
                        @extend :nth-child(2)
                    }
                    >:nth-child(4){
                        font-size: 30px;
                        color: #f1690e;
                    }
                }
                img{
                    width: 240px;
                    height: 330px;
                    border: 3px solid rgb(255, 255, 255);
                    box-sizing: border-box;
                    box-shadow: 0 5px 15px rgb(223, 218, 218);
                }
                .saoma-buy{
                    width: 130px;
                    height: 200px;
                    margin-left:350px;
                    >img{
                        width: 130px;
                        height: 130px;
                        margin-bottom: 10px;
                    }
                    >span{
                        display: block;
                        font-weight: bold;
                        width: 130px;
                        text-align: center;
                        color: #dd2d2b;
                    }
                }
            }
        }
    }
</style>